<template>
  <div id="app">
    <van-tabbar v-if="$route.meta.isShowTabBar" v-model="active" route style="background: rgba(255, 255, 255, 1);
    height: 50px;
    border-top: 1px solid #ddcdcd;">
      <van-tabbar-item replace to="/">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/books" icon="friends-o"
        >
           <span>账本</span>
        <template #icon="props">
          <img :src="props.active ? icon.bookactive : icon.bookinactive" />
        </template>
        </van-tabbar-item
      >
      <van-tabbar-item replace to="/statistical" icon="setting-o"
        >
         <span>统计</span>
        <template #icon="props">
          <img :src="props.active ? icon.statisticalactive : icon.statisticalinactive" />
        </template></van-tabbar-item
      >
    </van-tabbar>

    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      active: 1, //由于这里使用了vant 标签栏路由模式，该设置无效（但是此处不可删除）。可以自己尝试看看
      icon: {
        active: require("./assets/index/selectIndex.png"),
        inactive:require('./assets/index/noIndex.png'),
         bookactive: require("./assets/index/selcetbooks.png"),
        bookinactive:require('./assets/index/nobooks.png'),
        statisticalactive: require("./assets/index/selcetstatistical.png"),
        statisticalinactive:require('./assets/index/nostatistical.png'),
      },
    };
  },

  //初始化页面选中状态
  created() {
    //由于 vant 标签栏路由模式，无法自动加载页面，所以这里需要初始化
    console.log(this.$route); //打印当前路由属性
    if (this.$route.path === "/") {
      this.$router.push("/");
    }
  },
};
</script>
<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.van-tabbar-item__icon img{
  height: 5.66667vw !important;
}
</style>

